<template>
    <section class="loginContainer">
        <div class="loginInner">
            <div class="login_header">
                <h2 class="login_logo">硅谷外卖</h2>
                <div class="login_header_title">
                    <a href="javascript:;" :class="{on:num==1}" data-num="1"  @click="showTag($event)">短信登录</a>
                    <a href="javascript:;" :class="{on:num==2}" data-num="2"  @click="showTag($event)">密码登录</a>
                    <a href="javascript:;" :class="{on:num==3}" data-num="3"  @click="showTag($event)">密码登录2</a>
                </div>
            </div>
            <div class="login_content">
                <form @submit.prevent="login">
                    <div :class="{on:num==1}">
                        <section class="login_message">
                            <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
                            <button :disabled="!phoneTest" class="get_verification" :class="{phobeOkColor:phoneTest}" @click.prevent="startSyTime">
                              {{shengYuTime?`已发送(${shengYuTime})s`:'获取验证码'}}
                            </button>
                        </section>
                        <section class="login_verification">
                            <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
                        </section>
                        <section class="login_hint">
                            温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
                            <a href="javascript:;">《用户服务协议》</a>
                        </section>
                    </div>
                    <div :class="{on:num==2}">
                        <section>
                            <section class="login_message">
                                <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名" v-model="username">
                            </section>
                            <section class="login_verification">
                              <input :type="inputType" maxlength="8" placeholder="密码" v-model="psd" />
                              <div class="switch_button " :class="inputType=='password'?'off':'on'" @click="changeInputType">
                                <div class="switch_circle" :class="{right:inputType=='tel'}"></div>
                                <span class="switch_text">{{inputType=='password'?'...':''}}</span>
                              </div>
                            </section>
                            <section class="login_message" ref="btmdiv3">
                                <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
                                <img class="get_verification" src="http://localhost:3000/captcha" alt="captcha" @click="updataCaptcha" ref="captcha">
                            </section>
                        </section>
                    </div>
                    <div :class="{on:num==3}">
                        <section>
                            <section class="login_message">
                                <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名22">
                            </section>
                            <section class="login_verification">
                                <input type="tel" maxlength="8" placeholder="密码">
                                <div class="switch_button off">
                                    <div class="switch_circle right"></div>
                                    <span class="switch_text">...</span>
                                </div>
                            </section>
                            <section class="login_message">
                                <input type="text" maxlength="11" placeholder="验证码">
                                <img class="get_verification" src="./images/captcha.svg" alt="captcha">
                            </section>
                        </section>
                    </div>
                    <button class="login_submit">登录</button>
                </form>
                <a href="javascript:;" class="about_us">关于我们</a>
            </div>
            <a href="javascript:" class="go_back" @click="$router.back()">
                <i class="iconfont iconfanhui"></i>
            </a>
        </div>
        <AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip"></AlertTip>
    </section>
</template>

<script>
    import AlertTip from '../../components/AlertTip/AlertTip'
    import {reqSendCode,reqSmsLogin,reqPwdLogin} from "../../api";

    export default {
        name: "Login",
        data () {
            return {
                flag_show:true,
                num:1,
                phone:'', //手机号
                code:'', //验证码
                shengYuTime:0,
                inputType:'password',
                username:'', //用户名
                psd:'', //密码
                captcha:'', //图形验证码,
                alertText:'',
                alertShow:false
            }
        },
        components:{
            AlertTip
        },
        computed :{
          phoneTest (){
            let reg = /^[1]\d{10}$/;
            let phoneIsOk=reg.test(this.phone);
            return phoneIsOk;
          }
        },
        methods : {
            showTag (e){
              this.num=e.target.getAttribute('data-num');
            },
            async startSyTime(){
                if (!this.shengYuTime) {
                    this.shengYuTime = 30;
                    let Timer = setInterval(() => {
                        this.shengYuTime = this.shengYuTime - 1;
                        if (this.shengYuTime <= 0) {
                            clearInterval(Timer);
                            this.shengYuTime = 0;
                        }
                    }, 1000)
                    //发送短信验证码
                    let {phone} = this
                    let result = await reqSendCode({phone});
                    if (result.code == 1) { //返回code是1 表示发送验证码失败
                        this.tipShow(result.msg)
                        this.shengYuTime = 0;
                    }
                }
            },
            changeInputType(){
              if(this.inputType=="password"){
                this.inputType="tel"
              }else{
                this.inputType="password"
              }
            },
            tipShow (data){
                this.alertText=data;
                this.alertShow=true;
            },
            closeTip (){
                this.alertText='';
                this.alertShow=false;
            },
            async login (){
                let result;
                if(this.num==1){// 判断 是手机号码登录
                    // 判断手机号有误
                    const {phoneTest,code} = this
                    if(!phoneTest){
                        this.tipShow('手机号码不正确')
                        return
                    }else if(!code){
                        this.tipShow('code不正确')
                        return
                    }
                    let {phone}=this
                    result =await reqSmsLogin({phone,code})
                }else if(this.num==2){//还是 用户名密码登录
                      // 判断手机号有误
                    const {username,psd,captcha} = this
                    if(!username){
                        this.tipShow('用户名不正确')
                        return
                    }else if(!psd){
                        this.tipShow('密码不正确')
                        return
                    }else if(!captcha){
                        this.tipShow('captcha不正确')
                        return
                    }
                    result =await reqPwdLogin({username,psd,captcha})
                }else{
                    alert('请选择其他方式登录')
                    return
                }
                console.log(result)
                if(result.code==1){ //登录成功

                    let userInfo=result;
                    //存入vuex
                    this.$store.dispatch('recodeUserInfo',userInfo)
                    //跳转到我的页面
                    this.$router.replace('/profile')
                }else{ //登录失败
                    console.log(result)
                    //更新一次性图片
                    this.updataCaptcha();
                    //给出提示
                    this.tipShow(result.msg)
                }

            },
            //更新Captcha
            updataCaptcha () {
                this.$refs.captcha.src='http://localhost:3000/captcha?'+Date.now();
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "../../common/stylus/mixins.styl"
    .loginContainer
        width 100%
        height 100%
        background #fff
        .loginInner
            padding-top 60px
            width 80%
            margin 0 auto
            .login_header
                .login_logo
                    font-size 40px
                    font-weight bold
                    color #02a774
                    text-align center
                .login_header_title
                    padding-top 40px
                    text-align center
                    >a
                        color #333
                        font-size 14px
                        padding-bottom 4px
                        &:first-child
                            margin-right 40px
                        &.on
                            color #02a774
                            font-weight 700
                            border-bottom 2px solid #02a774
            .login_content
                >form
                    >div
                        display none
                        &.on
                            display block
                        input
                            width 100%
                            height 100%
                            padding-left 10px
                            box-sizing border-box
                            border 1px solid #ddd
                            border-radius 4px
                            outline 0
                            font 400 14px Arial
                            &:focus
                                border 1px solid #02a774
                        .login_message
                            position relative
                            margin-top 16px
                            height 48px
                            font-size 14px
                            background #fff
                            .get_verification
                                position absolute
                                top 50%
                                right 10px
                                transform translateY(-50%)
                                border 0
                                color #ccc
                                font-size 14px
                                background transparent
                                &.phobeOkColor
                                  color:#333
                        .login_verification
                            position relative
                            margin-top 16px
                            height 48px
                            font-size 14px
                            background #fff
                            .switch_button
                                font-size 12px
                                border 1px solid #ddd
                                border-radius 8px
                                transition background-color .3s,border-color .3s
                                padding 0 6px
                                width 30px
                                height 16px
                                line-height 16px
                                color #fff
                                position absolute
                                top 50%
                                right 10px
                                transform translateY(-50%)
                                &.off
                                    background #fff
                                    .switch_text
                                        float right
                                        color #ddd
                                &.on
                                    background #02a774
                                >.switch_circle
                                    //transform translateX(27px)
                                    position absolute
                                    top -1px
                                    left -1px
                                    width 16px
                                    height 16px
                                    border 1px solid #ddd
                                    border-radius 50%
                                    background #fff
                                    box-shadow 0 2px 4px 0 rgba(0,0,0,.1)
                                    transition transform .3s
                                    &.right
                                        transform translateX(30px)
                        .login_hint
                            margin-top 12px
                            color #999
                            font-size 14px
                            line-height 20px
                            >a
                                color #02a774
                    .login_submit
                        display block
                        width 100%
                        height 42px
                        margin-top 30px
                        border-radius 4px
                        background #4cd96f
                        color #fff
                        text-align center
                        font-size 16px
                        line-height 42px
                        border 0
                .about_us
                    display block
                    font-size 12px
                    margin-top 20px
                    text-align center
                    color #999
            .go_back
                position absolute
                top 5px
                left 5px
                width 30px
                height 30px
                >.iconfont
                    font-size 20px
                    color #999
</style>
